<template>
  <div style="padding: 10px 5px">
    <div :class="cardClass">
      <span v-if="cardClass == 'card_left'">
        <slot name="cardLeft"></slot>
      </span>
      <span style="margin-left: 10px">
        <h2>{{ cardTitle }}</h2>
        <p>{{ cardContent }}</p>
      </span>
      <span v-if="cardClass == 'card_right'">
        <slot name="cardRight"></slot>
      </span>
    </div>
  </div>
</template>
<script>
  export default {
    props: {
      cardClass: {
        type: String,
        default: 'card_no',
      },
      cardTitle: {
        type: String,
        default: 'Note Tag',
      },
      cardContent: {
        type: String,
        default: 'Note with Tag with with',
      },
    },
    data() {
      return {}
    },
  }
</script>
<style scoped lang="less">
  .card_left {
    border-left: 4px solid #003166;
    width: 100%;
    min-height: 100px;
    padding: 10px 5px !important;
    display: flex;
    background-color: #3395ff;
    border-radius: 5px;
    span:nth-child(1) {
      flex-grow: 1;
      margin: auto;
      text-align: center;
      font-size: 40px;
    }
    span:nth-child(2) {
      margin: auto;
      flex-grow: 9;
    }
  }
  .card_right {
    border-right: 4px solid #ff9500;
    width: 100%;
    min-height: 100px;
    display: flex;
    background-color: #ffaa33;
    border-radius: 5px;
    span:nth-child(2) {
      flex-grow: 1;
      margin: auto;
      text-align: center;
      font-size: 40px;
    }
    span:nth-child(1) {
      margin: auto;
      flex-grow: 9;
      text-align: right;
    }
  }
  .card_no {
    border-right: 4px solid #7a7a7a;
    width: 100%;
    min-height: 100px;
    background-color: #949494;
    border-radius: 5px;
    display: flex;
    span {
      margin: auto 0;
    }
  }
</style>
